<template>
    <div class="container">
      <!-- 按钮区域 -->
      <div class="handle-box">
        <el-button-group>
          <el-button style="margin-right: 1px;" color="#0eb394" @click="addGroupClass">新增排课</el-button>
          <el-button style="margin-right: 1px;" color="#1abc9c" @click="copyGroupClass">复制排课</el-button>
          <el-button style="margin-right: 1px;" color="#3498db" @click="refreshSchedule">刷新课表</el-button>
          <el-button style="margin-right: 1px;" color="#bdc3c7" @click="refreshCache">刷新缓存</el-button>
        </el-button-group>
        <el-button style="float: right;" color="#f39c12" @click="exportData">批量导出预约数据</el-button>
      </div>
  
      <el-divider></el-divider>
  
      <!-- 视图切换 -->
      <el-button-group class="view-switcher">
        <el-button style="margin-right: 1px;" :type="viewType === 'month' ? 'primary' : 'default'" color="#0eb394" @click="setView('month')">本月</el-button>
        <el-button style="margin-right: 1px;" :type="viewType === 'week' ? 'primary' : 'default'" color="#1abc9c" @click="setView('week')">本周</el-button>
        <el-button style="margin-right: 1px;" :type="viewType === 'day' ? 'primary' : 'default'" color="#3498db" @click="setView('day')">本日</el-button>
      </el-button-group>
  
      <el-divider></el-divider>
  
      <!-- 日历显示 -->
      <div v-if="viewType === 'month'">
        <el-calendar v-model="currentDate">
          <template #dateCell="{ date }">
            <div v-for="groupClass in getGroupClassesForMonth(date)" :key="groupClass.id" class="event">
              <el-tag type="success">{{ groupClass.teacher }} [{{ groupClass.name }}]</el-tag>
            </div>
          </template>
        </el-calendar>
      </div>
  
      <el-row v-if="viewType === 'week'" class="week-view">
        <el-table :data="weekData" border>
          <el-table-column label="时间段" prop="timeSlot" width="100"></el-table-column>
          <el-table-column
            v-for="day in weekDays"
            :key="day"
            :label="day"
            :prop="day"
          >
            <template #default="{ row, column }">
              <div 
                class="cell"
                :class="{ selected: selectedCell === row[column.property] }"
                @click="handleCellClick(row, column.property)"
              >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
  
        <!-- 天视图 -->
        <el-row v-else-if="viewType === 'day'" class="day-view">
            <el-table :data="dayData" border>
            <el-table-column label="时间段" prop="timeSlot" width="100"></el-table-column>
            <el-table-column label="课程安排" prop="schedule" />
            </el-table>
        </el-row>
  
      <el-divider></el-divider>
  
      <!-- 添加/编辑团课抽屉 -->
      <el-drawer v-model="drawer" :direction="direction" size="50%">
        <template #header>
          <h2>{{ form.id ? '编辑团课' : '新增团课' }}</h2>
        </template>
        <div class="div-form">
          <el-form :model="form">
            <el-form-item label="团课名">
              <el-select v-model="form.name" 
                placeholder="-请输入课程名称搜索-"
                filterable
                remote
                reserve-keyword
                :remote-method="remoteMethod"
              >
                <template #header>
                    <el-row >
                        <el-col :span="3"><h3>id</h3></el-col>
                        <el-col :span="7"><h3>课程名称</h3></el-col>
                        <el-col :span="7"><h3>时长（分钟）</h3></el-col>
                        <el-col :span="7"><h3>容量</h3></el-col>
                    </el-row>
                </template>
                <el-option
                    v-for="item in remoteCourseData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    >
                    <el-row>
                        <el-col :span="3"><span>{{ item.id }}</span></el-col>
                        <el-col :span="7"><span>{{ item.name }}</span></el-col>
                        <el-col :span="7"><span >{{ item.duration }}</span></el-col>
                        <el-col :span="7"><span >{{ item.contains }}</span></el-col>
                    </el-row>
                  
                    </el-option>

              </el-select>

            </el-form-item>
            <el-form-item label="老师" required>
              <el-select v-model="teacherform.name" 
                placeholder="-请输入老师名称或手机号搜索-"
                filterable
                remote
                reserve-keyword
                :remote-method="remoteTeacherMethod"
              >
                <template #header>
                    <el-row >
                        <el-col :span="3"><h3>id</h3></el-col>
                        <el-col :span="7"><h3>老师姓名</h3></el-col>
                        <el-col :span="7"><h3>手机号码</h3></el-col>
                        <el-col :span="7"><h3>备注</h3></el-col>
                    </el-row>
                </template>
                <el-option
                    v-for="item in remoteTeacherData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    >
                    <el-row>
                        <el-col :span="3"><span>{{ item.id }}</span></el-col>
                        <el-col :span="7"><span>{{ item.name }}</span></el-col>
                        <el-col :span="7"><span >{{ item.phone }}</span></el-col>
                        <el-col :span="7"><span >{{ item.introduce }}</span></el-col>
                    </el-row>
                  
                    </el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="日期" required>
              <el-date-picker v-model="form.date" type="date" />
            </el-form-item>
            <el-form-item label="上课人数容量" required>
              <el-input v-model="form.capacity" type="number" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed, onMounted } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { getCourses } from '@/api/course.js';
  import { getTeacherList } from '@/api/teacher.js';
  
  // 当前选择的日期
  const currentDate = ref(new Date()); 
  // 当前视图模式 ('month', 'week', 'day')
  const viewType = ref('month'); 
  
  // 假数据
  const groupClassData = ref([
    { id: 1, name: '油画中级', teacher: '张老师', date: '2024-08-08', capacity: 20 },
    { id: 2, name: '雕塑基础', teacher: '李老师', date: '2024-08-10', capacity: 15 },
  ]);


  
  const drawer = ref(false);
  const direction = ref('rtl');
  const form = reactive({
    id: null,
    name: '',
    teacher: '',
    date: '',
    capacity: '',
  });
  const teacherform = reactive({
    id: null,
    name: '',
    phone: '',
    introduce: '',
  });

  
  const weekDays = ref(['周日', '周一', '周二', '周三', '周四', '周五', '周六']);

  const weekData = ref([
  { timeSlot: '8:00-8:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '9:00-9:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '10:00-10:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '11:00-11:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '12:00-13:00', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '13:00-13:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '14:00-14:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '15:00-15:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '16:00-16:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '17:00-17:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
  { timeSlot: '18:00-18:50', '周日': '', '周一': '', '周二': '', '周三': '', '周四': '', '周五': '', '周六': '' },
]);
  

    // 天视图数据
    const dayData = ref([
    { timeSlot: '8:00-8:50',schedule: '周日'},
  { timeSlot: '9:00-9:50', schedule: '周日'},
  { timeSlot: '10:00-10:50',schedule: '周日'},
  { timeSlot: '11:00-11:50',schedule: '周日'},
  { timeSlot: '12:00-13:00',schedule: '周日'},
  { timeSlot: '13:00-13:50',schedule: '周日'},
  { timeSlot: '14:00-14:50',schedule: '周日'},
  { timeSlot: '15:00-15:50',schedule: '周日'},
  { timeSlot: '16:00-16:50',schedule: '周日'},
  { timeSlot: '17:00-17:50',schedule: '周日'},
  { timeSlot: '18:00-18:50',schedule: '周日'},
    // 更多时间段...
  ]);

    const dayRange = computed(() => {
    return moment(currentDate.value).format('YYYY年M月D日');
  });
  
  const setView = (type) => {
    viewType.value = type;
  };
  
  onMounted(() => {
    // 初始化数据或其他逻辑
  });


  const remoteCourseData = ref([])
  const remoteTeacherData = ref([])
  const remoteMethod = (query) => {
  //  console.log('查询内容:', query); // 打印 query 以检查输入内容

  //  if (!query) {
      // 如果没有查询条件，调用 getCourseInfo 获取所有课程信息
      getCourses().then(res => {
         console.log('所有课程数据：', res);
         remoteCourseData.value = res.data.data;  // 假设返回的数据路径相同
         console.log('remoteCourseData：', remoteCourseData.value);
      }).catch(error => {
         console.error('获取所有课程数据失败：', error);
      });
    }
  //  } else {
  //     // 如果有查询条件，调用 queryCourseInfo 进行查询
  //     queryCourses(query).then(res => {
  //        console.log('查询结果数据：', res);
  //        remoteCourseData.value = res.data.data;  // 假设返回的数据路径相同
  //        console.log('remoteCourseData：', remoteCourseData.value);
  //        loading.value = false;
  //     }).catch(error => {
  //        console.error('查询课程数据失败：', error);
  //        loading.value = false;
  //     });
  //  }

    const remoteTeacherMethod = (query) => {
      //  console.log('查询内容:', query); // 打印 query 以检查输入内容
    
      //  if (!query) {
          // 如果没有查询条件，调用 getTeacherInfo 获取所有教师信息
          getTeacherList().then(res => {
             console.log('所有教师数据：', res);
             remoteTeacherData.value = res.data.data;  // 假设返回的数据路径相同
          })
      }
  // 添加新团课
  const addGroupClass = () => {
    drawer.value = true;
    Object.assign(form, {
      id: null,
      name: '',
      teacher: '',
      date: '',
      capacity: '',
    });
  };
  
  // 提交表单
  const submitForm = () => {
    if (form.id) {
      // 更新团课
      const index = groupClassData.value.findIndex(groupClass => groupClass.id === form.id);
      if (index !== -1) {
        Object.assign(groupClassData.value[index], form);
      }
    } else {
      // 添加新团课
      form.id = groupClassData.value.length + 1;
      groupClassData.value.push({ ...form });
    }
    drawer.value = false;
  };
  
  // 占位符函数，按钮功能未实现
  const copyGroupClass = () => {
    ElMessage.info('复制排课功能正在开发中');
  };
  
  const refreshSchedule = () => {
    ElMessage.success('课表已刷新');
  };
  
  const refreshCache = () => {
    ElMessage.success('缓存已刷新');
  };
  
  const exportData = () => {
    ElMessageBox.confirm('是否导出预约数据?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      ElMessage.success('数据已导出');
    }).catch(() => {
      ElMessage.info('已取消导出');
    });
  };

  const handleCellClick = (row, columnProp) => {
    //做点击动作判断如果没有数据，则打开抽屉添加

    if (row[columnProp] === '') {
      drawer.value = true;
    } else {
      //如果有课程信息就打开抽屉填入已有信息并编辑
      drawer.value = true;
      Object.assign(form, {
        id: row.id,
        name: row.name,
        teacher: row.teacher,
        date: row.date,
        capacity: row.capacity,
      });
    }
};
  </script>
  
  <style lang="less" scoped>
  .el-button {
    color: white;
  }
  
  .handle-box {
    margin-bottom: 20px;
  }
  
  .view-switcher {
    margin-bottom: 20px;
  }
  
  .event {
    margin-bottom: 5px;
  }
  
  .div-form {
    text-align: center;
    width: 90%;
    margin-left: 20px;
  }

  .cell {
    display: flex;
    padding: 20px;
    height: 100%; /* 使单元格充满整个表格单元 */
    width: 100%; /* 使单元格充满整个表格单元 */
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .cell:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  }

  .cell.selected {
    background-color: #f0f9ff;
    border: 1px solid #dcdfe6;
  }
  </style>
  